<template>
  <el-card header="新建商家">
    <div style="width: 80%; margin: auto;">
      <el-form label-width="90px"
               ref="form"
               :model="shopInfo"
               :rules="shopInfoRule"
               label-position="right">
        <el-form-item label="商家Logo" prop="logo">
          <el-upload
            class="avatar-uploader"
            action="https://api.sc-edu.com/tool/upimg/"
            name="Img"
            :show-file-list="false"
            v-model="shopInfo.logo"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商家名称" prop="title">
          <el-input v-model="shopInfo.title" placeholder="请输入商家名称"></el-input>
        </el-form-item>
        <el-form-item label="商家帐号" prop="account">
          <el-input v-model="shopInfo.account" placeholder="请输入商家帐号"></el-input>
        </el-form-item>
        <el-form-item label="商家简介" prop="intro">
          <el-input v-model="shopInfo.intro" placeholder="请输入商家简介" type="textarea" rows="4"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="shopInfo.tel" placeholder="请输入商家联系方式" type="number" step="1"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="shopInfo.address" placeholder="请输入商家地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="back">返回</el-button>
          <el-button type="primary" @click="create">确认修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: "create",
    data() {
      return {
        imageUrl: '',
        shopInfo: {
          logo: '',
          title: '',
          account: '',
          intro: '',
          tel: '',
          address: ''
        },
        shopInfoRule: {
          logo: [{required:true, message: '请上传Logo'}],
          title: [{required:true, message: '请填写商家名称'}],
          account: [{required:true, message: '请填写帐号'}],
          intro: [{required:true, message: '请填写简介'}],
          tel: [{required:true, message: '请填写练习方式'}],
          address: [{required:true, message: '请填写联系地址'}]
        }
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      back() {
        this.$router.back();
      },
      create() {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            this.$message.error('表单信息不正确');
            return;
          }
          this.$message.success('创建成功');
          this.$router.back();
        })
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
